<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="供應商編碼" prop="supplierCode">
                  <el-input
                    disabled
                    v-model="form.supplierCode"
                    placeholder="請輸入供應商編碼"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="供應商名稱" prop="supplierName">
                  <el-input
                    v-model="form.supplierName"
                    placeholder="請輸入供應商名稱"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="聯繫人" prop="contacts">
                  <el-input
                    v-model="form.contacts"
                    placeholder="請輸入聯繫人"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="職務" prop="contactsPost">
                  <el-input
                    v-model="form.contactsPost"
                    placeholder="請輸入職務"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="手機號" prop="telphone">
                  <el-input
                    v-model="form.telphone"
                    placeholder="請輸入手機號"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="郵箱" prop="email">
                  <el-input v-model="form.email" placeholder="請輸入郵箱" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="傳真" prop="facsimile">
                  <el-input v-model="form.facsimile" placeholder="請輸入傳真" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="公司地址" prop="address">
                  <el-input
                    v-model="form.address"
                    placeholder="請輸入公司地址"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="稅率" prop="taxRate">
                  <el-input
                    v-model="form.taxRate"
                    clearable
                    placeholder="請輸入稅率（0-1）"
                    oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'')"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="供應商分類" prop="supplierType">
                  <el-select
                    style="width: 100%"
                    v-model="form.supplierType"
                    placeholder="請選擇供應商分類"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.supplier_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="服務情況" prop="serviceSituation">
                  <el-select
                    style="width: 100%"
                    v-model="form.serviceSituation"
                    placeholder="請選擇服務情況"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.supplier_service_situation"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="行業" prop="industry">
                  <el-select
                    style="width: 100%"
                    v-model="form.industry"
                    placeholder="請選擇所屬行業"
                  >
                    <el-option
                      v-for="dict in dict.type.industry_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="入駐時間" prop="inTime">
                  <el-date-picker
                    style="width: 100%"
                    clearable
                    v-model="form.inTime"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="請選擇入駐時間"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item label="供應商狀態" prop="supplierStatus">
                  <el-select
                    style="width: 100%"
                    v-model="form.supplierStatus"
                    placeholder="請選擇供應商狀態"
                    clearable
                  >
                    <el-option
                      v-for="dict in dict.type.supplier_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="text-align: center">
            <el-button
              type="primary"
              :disabled="btn_disable"
              @click="submitForm"
              >確 定</el-button
            >
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
      
      <script>
import {
  listSupplier,
  getSupplier,
  delSupplier,
  addSupplier,
  updateSupplier,
} from "@/api/biz/supplier";
export default {
  name: "SupplierAdd",
  dicts: [
    "supplier_type",
    "tax_nature",
    "supplier_service_situation",
    "industry_type",
    "supplier_status",
  ],
  data() {
    return {
      btn_disable: false,
      // 表单參數
      form: {},
      // 表单校验
      rules: {
        email: [
          {
            type: "email",
            message: "請輸入正確的郵箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  created() {
    this.form = this.$route.query;
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btn_disable = true;
          updateSupplier(this.form)
            .then((response) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              this.$modal.msgSuccess("修改成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/supplier/supplier", name: "Supplier" };
                this.$tab.refreshPage(obj);
              });
            })
            .catch((err) => {
              setTimeout(() => {
                this.btn_disable = false;
              }, 1000);
              console.log(err);
            });
        }
      });
    },
    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/supplier/supplier", name: "Supplier" };
        this.$tab.refreshPage(obj);
      });
    },
  },
};
</script>
      